import Icon from '@/component/icon'
import NavBar from '@/component/Nav'
import classnames from 'classnames'
import { useRef, useState } from 'react'
import styles from './index.module.scss'

export default function Search() {
  // 设置value

  const timerID = useRef(-1)
  // 受控表单数据收集
  const [val, setVal] = useState('')

  const handleVal = (e: string) => {
    setVal(e)
    // 清除定时器，只触发最后一次
    window.clearTimeout(timerID.current)
    // 开启定时器
    timerID.current = window.setTimeout(() => {
      if (!val.trim()) return
      console.log('搜索数据', val)
    }, 500)
  }
  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar right={<span className="search-text">搜索</span>}>
        <div className="navbar-search">
          <Icon type="iconbtn_search" className="icon-search" />

          <div className="input-wrapper">
            {/* 输入框 */}
            <input value={val} onChange={(e) => handleVal(e.target.value)} type="text" placeholder="请输入关键字搜索" />

            {/* 清空输入框按钮 */}
            <Icon type="iconbtn_tag_close" className="icon-close" />
          </div>
        </div>
      </NavBar>

      {/* 搜索历史 */}
      <div className="history">
        <div className="history-header">
          <span>搜索历史</span>
          <span>
            <Icon type="iconbtn_del" />
            清除全部
          </span>
        </div>

        <div className="history-list">
          <span className="history-item">
            Python生成九宫格图片<span className="divider"></span>
          </span>
          <span className="history-item">
            Python<span className="divider"></span>
          </span>
          <span className="history-item">
            CSS<span className="divider"></span>
          </span>
          <span className="history-item">
            数据分析<span className="divider"></span>
          </span>
        </div>
      </div>

      {/* 搜素建议结果列表 */}
      <div className={classnames('search-result', 'show')}>
        <div className="result-item">
          <Icon className="icon-search" type="iconbtn_search" />
          <div className="result-value">
            <span>{'高亮'}</span>
            {`其余`}
          </div>
        </div>
      </div>
    </div>
  )
}
